<template>
  <el-drawer
    v-model="open"
    title="查看详情"
    :with-header="true"
    size="85%"
    class="class-attendance-record-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <el-space fill wrap direction="horizontal" style="width: 100%">
      <el-card shadow="never">
        <el-form :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学员姓名">
                {{ form.studentName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课班级">
                {{ form.className }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程名称">
                {{ form.courseNameC }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课时间">
                {{ form.classDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到课状态">
                {{ form.state }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主班老师">
                {{ form.teacherName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="助教老师">
                {{ form.assistantName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消耗方式">
                {{ form.courseName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消耗课时">
                消耗 {{ form.classHourPay }}课时
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课消时间">
                {{ form.callTime }}
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="点名老师">
                {{ form.teacherName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点名时间">
                {{ form.callTime }}
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="上课教室">
                {{ form.classRoomName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课内容">
                {{ form.description }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" header="消耗订单">
        <el-table v-loading="loading" :data="list" border>
          <el-table-column label="订单号" align="center" prop="orderNoTsc">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">
                {{ scope.row.orderNoTsc }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="购买课程" align="center" prop="courseName" />
          <el-table-column label="单价" align="center" prop="unitPrice">
            <template #default="scope">
              {{ scope.row.unitPrice + "元/课时" }}
            </template>
          </el-table-column>
          <el-table-column
            label="消耗购买数量"
            align="center"
            prop="classHourPayNormal"
          >
            <template #default="scope">
              {{ scope.row.classHourPayNormal + "课时" }}
            </template>
          </el-table-column>
          <el-table-column
            label="消耗赠送数量"
            align="center"
            prop="classHourPayGive"
          >
            <template #default="scope">{{
              scope.row.classHourPayGive + "课时"
            }}</template>
          </el-table-column>
          <el-table-column label="课消金额" align="center" prop="amount">
            <template #default="scope">{{ scope.row.amount + "元" }}</template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-space>
  </el-drawer>
  <el-drawer
    v-model="openOrderDetail"
    title="订单详情"
    :with-header="true"
    size="80%"
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="closeDetail"
  >
    <Detail :orderId="orderId" v-if="openOrderDetail" />
  </el-drawer>
</template>

<script setup>
import Detail from "@/views/financial/orderManage/orderDetailDiv.vue";
import { getDetailAPI } from "@/api/financial/classAttendanceRecord";

const { proxy } = getCurrentInstance();
const emits = defineEmits(["refreshPage"]);
const loading = ref(false);
const list = ref([]);
const open = ref(false);
const openOrderDetail = ref(false);
const orderId = ref(null);

const data = reactive({
  form: {},
  currentItem: {},
});

const { form, currentItem } = toRefs(data);

function getDetail() {
  getDetailAPI({ id: currentItem.value.id }).then((response) => {
    form.value = response.data;
    const {
      orderNoTsc,
      courseName,
      unitPrice,
      classHourPayNormal,
      classHourPayGive,
      amount,
      tscId,
    } = form.value;
    list.value = [
      {
        orderNoTsc,
        courseName,
        unitPrice,
        classHourPayNormal,
        classHourPayGive,
        amount,
        tscId,
      },
    ];
  });
}

function handleDetail(row) {
  orderId.value = row.tscId;
  openOrderDetail.value = true;
}

function initPage() {
  getDetail();
}

function openW(item) {
  open.value = true;
  currentItem.value = item;
  initPage();
}

function closeW() {
  open.value = false;
}

function closeDetail() {
  openOrderDetail.value = false;
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
